part of quadcopterclient;

class UI
{
// pass in the id for the copter which is Me
// this will be called just once
// called once with e function taking a Velocity object and returning void
// call this when the user changes velocity
  
//    void initialize(String id,void f( Velocity value));
//
// pass in the lasted set of copters 
// each copter has function position() returning a Point 
// where x and y are -1000 ... 1000
// the function returns the position at the current time 
  
//    void updateCopters(QuadCopterManager latest);

  
  
  
  void appStartup(  ) {
    

    DivElement  text_above_the_grid = query("#text_above_the_grid_id");
    DivElement  text_below_the_grid = query("#text_below_the_grid_id");
    
    int text_above_the_grid_height = text_above_the_grid.clientHeight;
    int text_below_the_grid_height = text_below_the_grid.clientHeight;
    
    int main_copter_grid_id_clipping_container_Height = window.innerHeight - text_above_the_grid_height - text_above_the_grid_height;
    
    DivElement  main_copter_grid_id_clipping_container = query("#main_copter_grid_id_clipping_container");
    
    main_copter_grid_id_clipping_container.style.height = main_copter_grid_id_clipping_container_Height.toString() + "px";
    
    int main_copter_grid_id_clipping_container_width = main_copter_grid_id_clipping_container.clientWidth;
    
    Element bkg_image = query("#bkg_img_id");
    
    
//    Rect client = bkg_image.client;
//    
//    int bkg_image_x = client.topLeft.x;
//    int bkg_image_x = client.topLeft.x;
    

//    client.
    
            
    int bkg_imageWidth = bkg_image.clientWidth;
   
    int bkg_imageHeight = bkg_image.clientHeight;
    
    num imageLeft = 0;
    num imageTop = 0;

    
    main_copter_grid_id_clipping_container.onClick.listen((e) {
      // When the button is clicked, it runs this code.
      
      int client_x = e.client.x;
      int client_y = e.client.y;
      
      
      num clickFromCenterX = client_x - (  main_copter_grid_id_clipping_container_width / 2 );
      num clickFromCenterY = client_y - (  main_copter_grid_id_clipping_container_Height / 2 );
      
      imageLeft = imageLeft - clickFromCenterX;
      imageTop = imageTop - clickFromCenterY;
      
      if ( imageLeft > 0 ) {
        
        imageLeft = 0;
        
      } else if ( imageLeft < ( - ( bkg_imageWidth - main_copter_grid_id_clipping_container_width ) ) ) {
        
        imageLeft = - ( bkg_imageWidth - main_copter_grid_id_clipping_container_width );
      }
      
      
      if ( imageTop > 0 ) {
        
        imageTop = 0;
        
      } else if ( imageTop < ( - ( bkg_imageHeight - main_copter_grid_id_clipping_container_Height ) ) ) {
        
        imageTop = - ( bkg_imageHeight - main_copter_grid_id_clipping_container_Height );
      }

      
      bkg_image.style.left = imageLeft.toString() + "px";
      bkg_image.style.top = imageTop.toString() + "px";


      
      var clickedElem = e.target;
      
//      bkg_image.
      
//      print('You clicked the ${clickedElem.id} element. e.clientX ${e.client.x}. ');
    });
    
    var sss = 0;
  }
 }